import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';

function formatName (user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez',
  photo: 'https://img2.baidu.com/it/u=1426824831,2092014520&fm=26&fmt=auto',
};

const element1 = (
  <h1>
    Hello, {formatName(user)}!
    <br />
    Hello, {user.firstName} {user.lastName}!
    <br />
    {1 + 1}
    <br />
    <img src={user.photo} alt="" />
  </h1>
);


ReactDOM.render(
  element1,
  // < React.StrictMode >
  // <App />
  // </React.StrictMode >,
  document.getElementById('root')
);

// function tick () {
//   const element = <div>
//     {new Date().toLocaleTimeString()}
//     <br />
//     {element1}
//   </div>
//   ReactDOM.render(element, document.getElementById('root'));
// }
// setInterval(tick, 1000)

// 定义组件
// 函数组件
function Welcome (props) {
  return <h1>Hello, {props.name}</h1>;
}
function NowTime () {
  return <p>{new Date().toLocaleTimeString()}</p>
}
// 组合组件
function App () {
  return (
    <div>
      <h2>欢迎登录</h2>
      <Welcome name={user.firstName} />
      <NowTime />
    </div>
  )
}

const ele = <Welcome name={user.firstName} />
ReactDOM.render(<App />, document.getElementById('root'));

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    }
  }
  componentDidMount () {
    this.timerId = setInterval(() => this.tick(),
      1000)
  }
  componentWillUnmount () {
    clearInterval(this.timerID);
  }
  tick () {
    this.setState({
      date: new Date()
    })
  }
  render () {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是{this.state.date.toLocaleTimeString()}。</h2>
      </div>
    );
  }
}
// function tick () {
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);
// }
// setInterval(tick, 1000);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals



reportWebVitals();
